﻿@model NewCity.Controllers.CreateStoryController
@{
    ViewData["Title"] = "Card";
    StoryCard LastStoryCard = ViewBag.LastCard as StoryCard;
}
<script src="~/js/enum.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<style>
    input {
        margin-bottom: 5px;
    }

    footer {
        display: none;
    }
</style>
<!--故事卡包装为树。新建下一故事卡要在故事卡里面建-->
<h2>卡片<button type="button" style="float:right" class="btn btn-primary" onclick="ReturnTree('@LastStoryCard.StorySeriesID')">返回到树</button></h2>
<hr />
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div id="StoryId">

                </div>
                <div id="StoryName">

                </div>
            </div>
            <div class="row">
                <div class="col-md-3" id="TitleContent"></div>
            </div>

            <div class="row">
                <div class="col-md-8" id="Content">

                </div>
                <div class="col-md-4" id="IMG">
                    <img src="@LastStoryCard.IMG" class="img-responsive" />
                </div>
            </div>

            <div class="row" id="Option"></div>
            <div class="form-group">
                <button type="button" onclick="AddOption()">增加选项</button>
            </div>
            <div class="form-group">
                <form id="saveform" asp-action="Save" enctype="multipart/form-data">
                    <label>插图</label><input type="file" name="file" accept="image.jpg,image.png" />
                    <input name="json" id="json" Hidden />
                    <button type="submit" onclick="SaveCard()">保存</button>
                </form>
            </div>


        </div>
    </div>
</div>

<!--条件模态框-->
<div id="ConditionModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">条件</h4>
            </div>
            <div class="modal-body">
                <div id="Condition"></div>
                <div id="Conditionoperation"></div>
            </div>
        </div>
    </div>
</div>

<!--条件状态选择模态框-->
<div id="StatusModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">条件选择</h4>
            </div>
            <div class="modal-body">
                <div id="StatusSelectoperation">
                    <button onclick="addstatus('#StatusModel')">+</button>
                </div>
                <ul id="StatusSelect"></ul>
            </div>
        </div>
    </div>
</div>

<!--条件状态数值选择模态框-->
<div id="StatusValueModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">条件值</h4>
            </div>
            <div class="modal-body">
                <ul id="StatusSelectValue"></ul>
            </div>
        </div>
    </div>
</div>




<!--新增状态选择模态框-->

<div id="StatusAddModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">新增状态</h4>
            </div>
            <div class="modal-body">
                <input name="status" id="status" />
                <button type="submit" onclick="confidstatus()">确定</button>
                <button onclick="cancelstatus()">取消</button>
            </div>
        </div>
    </div>
</div>




<!--效果模态框-->
<div id="EffectModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">效果</h4>
            </div>
            <div class="modal-body">
                <div id="Effect"></div>
                <div id="Effectoperation"></div>
            </div>
        </div>
    </div>
</div>

<!--效果数值选择模态框-->
<div id="effectValueModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">效果值</h4>
            </div>
            <div class="modal-body">
                <ul id="effectSelectValue"></ul>
            </div>
        </div>
    </div>
</div>

<!--效果状态选择模态框-->
<div id="EffectSelectModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">状态选择</h4>

            </div>
            <div class="modal-body">
                <ul id="EffectTab" class="nav nav-tabs">
                    <li class="active"><a href="#home" data-toggle="tab">故事状态</a></li>
                    <li><a href="#character" data-toggle="tab">人物属性</a></li>
                    <li><a href="#item" data-toggle="tab">物品</a></li>
                    <li><a href="#operation" data-toggle="tab">操作</a></li>
                </ul>

                <div id="EffectTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <p>   </p>
                        <button onclick="addstatus('#EffectSelectModel')">+</button>
                        <ul id="statusSelect"></ul>
                    </div>
                    <div class="tab-pane fade" id="character">
                        <ul id="characterSelect"></ul>
                    </div>
                    <div class="tab-pane fade" id="item">
                        <ul id="itemSelect"></ul>
                    </div>
                    <div class="tab-pane fade" id="operation">
                        <ul id="operationSelect"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--下一张卡片模态框-->
<div id="NextCardModel" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">下一页详情</h4>
            </div>
            <div class="modal-body">
                <p>下一页ID</p>
                <input class="col-md-11" id="optionnextcard" />
                <input hidden id="nooptionnextcard" />
                <button class="btn btn-primary" onclick="ConfirmNextCard()" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="~/js/wangEditor.min.js"></script>
<script>
    //将来自控制器的故事卡转换为js对象,并显示到页面
    var CardObj;
    $(function () {
        Serialize()
        CreaterView(CardObj)
        CreaterEditor()
        BindButton()

    });
</script>
<script>
    /////////////////////////主界面
    //根据输入的卡片构建主界面

    function CreaterView(card) {
        EmptyView()
        let content = "<textarea hidden id='Text' style=height:250px;width:100%></textarea>"
        content += "<div id='TextEditor'>" + card.text + "</div>"
        let title = "<input id='Title' value=" + card.title +">";

        $("#StoryId").append(card.id)
        $("#StoryName").append(card.storyName)
        $("#TitleContent").append(title)
        $("#Img").append(card.img)
        $("#Content").append(content)
        $("#BackgroundIMG").append(card.backgroundIMG)

        if (card.storyOptions) {
            for (let i = 0; i < card.storyOptions.length; i++) {
                CreateOption(i);
            }
        }
    }
    function CreaterEditor() {
        //因为会挡住，打开model移动editor到最底层
        $('#Content').css('z-index', 1)
        var E = window.wangEditor
        var editor = new E('#TextEditor')
        editor.customConfig.menus = [
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'undo',  // 撤销
            'redo'  // 重做
        ]
        var $text1 = $('#Text')
        editor.customConfig.onchange = function (html) {
            // 监控变化，同步更新到 textarea
            $text1.val(html)
        }
        editor.create()
        // 初始化 textarea 的值
        $text1.val(editor.txt.html())
    }

    function BindButton() {
        $(window).keydown(function (event) {
            if (!(event.which == 83 && event.ctrlKey)) return true;
            SaveCard()
            $("#saveform").submit();
            event.preventDefault();
            return false
        })
    }

    function CreateOption(i) {
        let option = "";
        option += "<div class='OptionGroup' id='"+ i +"'>"
        option += i + 1 + "."
        option += "<button type='button' onclick='CreateCondition(" + i + ")'>条件</button>"

        option += "<input id=option" + i + " value='" + CardObj.storyOptions[i].text + "' />"
        option += "<button type='button' onclick='CreateEffect(" + i + ")'>效果</button>"
        option += "<button type='button' onclick='Cancel(" + i + ")'>取消</button>"
        option += "<button type='button' onclick=NextCardDetail(" + i + ")>下一页详情</button>"
        option += "<button type='button' onclick=NextCard(" + i + ")>→</button>"
        option += "</div>"

        $("#Option").append(option)
    }
    function EmptyView()
    {
        $("#StoryId").empty()
        $("#StoryName").empty()
        $("#Img").empty()
        $("#Content").empty()
        $("#BackgroundIMG").empty()

    }
    //取消并保存选项
    function Cancel(optionid) {
        $("#" + optionid).remove();
        CardObj.storyOptions.splice(optionid, 1)
        SaveCard()
        $("#saveform").submit();
    }
    //增加选项
    function AddOption() {
        let option = {
            condition: [],
            condition: [],
            effect: [],
            id: guid(),
            nextStoryCardID: emptyguid,
            storyCardID: CardObj.id,
            text: ""
        };
        CardObj.storyOptions.push(option);
        CreateOption(CardObj.storyOptions.length-1)
    }
    function SaveCard() {
        CardObj.title = $('#Title').val();
        CardObj.text = $('#Text').val();
        let i = 0;
        $('.OptionGroup input').each(function () {
            CardObj.storyOptions[i].text = $(this).val();
            CardObj.storyOptions[i].condition = JSON.stringify(CardObj.storyOptions[i].condition);
            CardObj.storyOptions[i].effect = JSON.stringify(CardObj.storyOptions[i].effect);
            i++;
        })
        let json = JSON.stringify(CardObj);

        $("#json").val(json);
    }

    //返回到树界面
    function ReturnTree(storySeriesID) {
        window.location.href = '/CreateStory/ReturnTree?StorySeriesID=' + storySeriesID
    }

    //前进到下一卡片
    function NextCard(optionid) {
        window.location.href = '/CreateStory/NextCard/' + CardObj.storyOptions[optionid].id
    }

    //下一页详情显示
    function NextCardDetail(optionid) {
        $("#optionnextcard").val(CardObj.storyOptions[optionid].nextStoryCardID);
        $("#nooptionnextcard").val(optionid);
        $("#NextCardModel").modal("show");

    }

    //下一页详情确定
    function ConfirmNextCard() {
        let optionid = $("#nooptionnextcard").val();
        CardObj.storyOptions[optionid].nextStoryCardID = $("#optionnextcard").val();
    }

    //序列化对象
    function Serialize(data) {
        CardObj = JSON.parse(data)

        SerializeOption();
    }
    function Serialize() {

        CardObj = @Json.Serialize(LastStoryCard);

        SerializeOption();
    }
    function SerializeOption() {
        if (CardObj.storyOptions != null) {
            for (let i = 0; i < CardObj.storyOptions.length; i++) {
                CardObj.storyOptions[i].condition = JSON.parse(CardObj.storyOptions[i].condition);
                CardObj.storyOptions[i].effect = JSON.parse(CardObj.storyOptions[i].effect);
            }
        }
        else {
            CardObj.storyOptions = new Array();
        }
    }


    ///////////////////////////////end
</script>
<script>
    ///////////////////////////////条件
    let ConditionCount = 0;
    //设置条件
    function CreateCondition(i) {
        EmptyCondition();
        ConditionCount = 0;
        for (let j = 0; j < CardObj.storyOptions[i].condition.length; j++) {
            Condition(j, i);
            ConditionCount++;
        }
        let string = "<button onclick='AddCondition(" + i + ")'>+</button><button onclick = 'SaveCondition(" + i + ")'> 确定</button> ";
        $('#Conditionoperation').append(string);

        $('#ConditionModel').modal('show');
    }

    //添加条件
    function AddCondition(storyoption) {
        Condition(ConditionCount, storyoption);
        ConditionCount++;
    }

    //条件保存
    function SaveCondition(storyoption) {
        let condition = [];
        $(".conditionname").each(function () {
            let c = {
                Name: $(this).val(),
                Type: "",
                Value: ""
            }
            condition.push(c);

        })
        $(".conditionvalue").each(function (i) {
            condition[i].Value = $(this).val();
        })
        $(".conditionidselect").each(function (i) {
            condition[i].Type = $(this).val();
        })
        CardObj.storyOptions[storyoption].condition = condition;

        $('#ConditionModel').modal('hide');
    }

    function Condition(condition, storyoption) {
        let name = "";
        let value = "";
        let type = "";

        if (CardObj.storyOptions[storyoption].condition.length >= condition + 1) {
            name = CardObj.storyOptions[storyoption].condition[condition].Name
            value = CardObj.storyOptions[storyoption].condition[condition].Value
            type = CardObj.storyOptions[storyoption].condition[condition].Type
        }
        let contect = "";
        if (type == "4") {
            context = "";
        }
        else {
            context =
                "<div id='conditionid" + condition + "'>" +
                "<input id='condition" + condition + '-' + storyoption + "' readonly onclick=selectstatus('condition" + condition + '-' + storyoption + "') class='conditionname' value='" + name + "'/>" +
                "<select class='conditionidselect'>"
                + "<option value='0'>></option>"
                + "<option value='1'><</option>"
                + "<option value='2'>=</option>"
                + "<option value='3'>≠</option>"
                + "<select/>" +
                "<input id='conditionvalue" + condition + '-' + storyoption + "' readonly onclick=selectstatusvalue('conditionvalue" + condition + '-' + storyoption + "') class='conditionvalue' value='" + value + "'/>" +
                "<button onclick='ConditionCancel(" + condition + "," + storyoption + ")'>取消</button>" +
                "</div>"
            $("#conditionidselect" + condition).val(type)
        }
        $('#Condition').append(context)
        $("#conditionid" + condition + "  option[value='" + type + "' ]").attr("selected", true);
    }
    function EmptyCondition() {
        $('#Condition').empty();
        $('#Conditionoperation').empty();
    }

    //取消条件
    function ConditionCancel(condition, storyoption) {
        $("#conditionid" + condition).remove();
    }

    //选择条件状态
    function selectstatus(option) {
        //$('#ConditionModel').modal('hide')
        $('#StatusSelect').empty();
        $('#StatusModel').modal('show')

        //获取该故事系列状态
        //加载到页面
        $.post("/CreateStory/getStatus", { StorySeriesID: CardObj.storySeriesID }, function (data) {
            let li = '';
            li += '<h3>故事状态</h3>'
            for (let i in data) {
                li += "<li onclick=clickstatus('" + data[i].name + "','" + option + "')>" + data[i].name + "</li>";
            }
            li += '<hr/>'
            li += '<h3>人物状态</h3>'
            for (let i in characterStatus) {
                li += "<li onclick=clickstatus('" + characterStatus[i] + "','" + option + "')>" + characterStatus[i] + "</li>";
            }

            $('#StatusSelect').append(li);
        })
    }

    //选择条件状态类型
    function selectstatusvalue(option) {
        $('#ConditionModel').modal('hide')
        $('#StatusValueModel').modal('show')
        let li = '';
        li += "<li><label> 直接指定</label><input id='select-status-value' /><button onclick=clickstatusvalue('直接指定','" + option + "') > 确定</button ></li > ";
        li += "<li onclick=clickstatusvalue('随机数','" + option + "')>随机数(1D100)</li>";
        li += "<li onclick=clickstatusvalue('困难随机数','" + option + "')>困难随机数(1D100)</li>";
        li += "<li onclick=clickstatusvalue('惩罚随机数','" + option + "')>惩罚随机数(1D100)</li>";
        li += "<li onclick=clickstatusvalue('惩罚困难随机数','" + option + "')>惩罚困难随机数(1D100)</li>";
        $('#StatusSelectValue').empty();
        $('#StatusSelectValue').append(li);
    }
    function addstatus(startmodel) {
        $('#EffectModel').modal('hide')
        $('#ConditionModel').modal('hide')
        $(startmodel).modal('hide')
        $('#StatusAddModel').modal('show')
    }
    function confidstatus() {
        $.post('/CreateStory/Addstatus', { storyseries: CardObj.storySeriesID, status: $('#status').val() }, function (data) {
            if (data == true) {
                //$('#StatusModel').modal('show')
                $('#StatusAddModel').modal('hide')
            }
            else {
                alert(data)
            }
        });
    }

    function cancelstatus() {
        $('#StatusModel').modal('show')
        $('#StatusAddModel').modal('hide')
    }

    function clickstatusvalue(value, option) {
        if (value == '直接指定') {
            value = $('#select-status-value').val();
        }
        $("#" + option).val(value)
        $('#ConditionModel').modal('show')
        $('#StatusSelect').empty();
        $('#StatusValueModel').modal('hide')
    }

    function clickstatus(name, option) {
        $("#" + option).val(name)
        $('#StatusSelectValue').empty();
        $('#StatusModel').modal('hide')
        $('#ConditionModel').modal('show')
    }

    /////////////////////////////////end
</script>
<script>
    /////////////////////////////////效果
    let EffectCount = 0;
    //设置效果
    function CreateEffect(i) {
        EmptyEffect();
        EffectCount = 0;
        for (let j = 0; j < CardObj.storyOptions[i].effect.length; j++) {
            Effect(j, i);
            EffectCount++;
        }
        let string = "<button onclick='AddEffect(" + i + ")'>+</button><button onclick = 'SaveEffect(" + i + ")' > 确定</button> ";
        $('#Effectoperation').append(string);

        $('#EffectModel').modal('show');
    }

    //添加效果
    function AddEffect(storyoption) {
        Effect(EffectCount, storyoption)
        EffectCount++;
    }

    function Effect(effect, storyoption) {
        let name = "";
        let value = "";
        let type = "";

        if (CardObj.storyOptions[storyoption].effect.length >= effect + 1) {
            name = CardObj.storyOptions[storyoption].effect[effect].Name
            value = CardObj.storyOptions[storyoption].effect[effect].Value
            type = CardObj.storyOptions[storyoption].effect[effect].Type
        }
        let context = "";

        if (type != "4") {
            context =
                "<div id='effectid" + effect + "'>" +
                "<input class='effectname' readonly onclick=selecteffect('effect" + effect + '-' + storyoption + "') id='effect" + effect + '-' + storyoption + "' value='" + name + "'/>" +
                "<select class='effectidselect'>"
                + "<option value='0'>增加</option>"
                + "<option value='1'>减少</option>"
                + "<option value='2'>赋值</option>"
                + "<option hidden value='4'>结束</option>"
                + "<select/>"
                + "<input readonly id='effectvalue-" + effect + '-' + storyoption + "' onclick=selecteffectvalue('effectvalue-" + effect + '-' + storyoption + "')  class='effectvalue'  value='" + value + "'/>" +
                "<button onclick='EffectCancel(" + effect + "," + storyoption + ")'>取消</button>" +
                "</div>"
        }
        else if (type == "4") { //结束隐藏
            context =
                "<div id='effectid" + effect + "'>" +
                "<input class='effectname' readonly onclick=selecteffect('effect" + effect + '-' + storyoption + "') id='effect" + effect + '-' + storyoption + "' value='" + name + "'/>" +
                "<select hidden class='effectidselect'>"
                + "<option value='0'>增加</option>"
                + "<option value='1'>减少</option>"
                + "<option value='2'>赋值</option>"
                + "<option hidden value='4'>结束</option>"
                + "<select/>" +
                "<input hidden  class='effectvalue'  value='" + value + "'/>" +
                "<button onclick='EffectCancel(" + effect + "," + storyoption + ")'>取消</button>" +
                "</div>"
        }
        $("#effectidselect" + effect).val(type)
        $('#Effect').append(context)
        $("#effectid" + effect +" option[value='" + type + "' ]").attr("selected", true);
    }

    //选择效果状态类型
    function selecteffectvalue(option) {
        $('#EffectModel').modal('hide')
        $('#effectValueModel').modal('show')
        let li = '';
        li += "<li><label> 直接指定</label > <input id='select-effect-value' /> <button onclick=clickeffectvalue('直接指定','" + option + "') > 确定</button ></li > ";
        li += "<li onclick=clickeffectvalue('1D3','" + option + "')>随机数(1D3)</li>";
        li += "<li onclick=clickeffectvalue('1D6','" + option + "')>随机数(1D6)</li>";
        li += "<li onclick=clickeffectvalue('1D12','" + option + "')>随机数(1D12)</li>";
        $('#effectSelectValue').empty();
        $('#effectSelectValue').append(li);
    }

    function clickeffectvalue(value, option) {
        if (value == '直接指定') {
            value = $('#select-effect-value').val();
        }
        $("#" + option).val(value)
        $('#EffectModel').modal('show')
        $('#effectSelectValue').empty();
        $('#effectValueModel').modal('hide')
    }

    //选择效果状态
    function selecteffect(option) {
        //$('#EffectModel').modal('hide')
        $('#statusSelect').empty();
        $('#characterSelect').empty();
        $('#itemSelect').empty();
        $('#EffectSelectModel').modal('show')

        //获取该故事系列状态
        //加载到页面
        $.post("/CreateStory/getStatus", { StorySeriesID: CardObj.storySeriesID }, function (data) {

            let li = '';
            for (let i in data) {
                li += "<li onclick = clickEffect('" + data[i].name + "','" + option + "') > " + data[i].name + "</li > ";
            }
            $('#statusSelect').append(li);
        })
        $.post("/CreateStory/getItem", { StorySeriesID: CardObj.storySeriesID }, function (data) {
            let li = '';

            for (let i in data) {
                li += "<li onclick=clickEffect('" + data[i].name + "','" + option + "')>" + data[i].name + "</li>";
            }
            $('#itemSelect').append(li);
        });
        let li = '';
        for (let i in characterStatus) {
            li += "<li onclick=clickEffect('" + characterStatus[i] + "','" + option + "')>" + characterStatus[i] + "</li>";
        }
        $('#characterSelect').append(li);
        let operation = "<li onclick=clickOperation('结束故事','" + option + "','4')>结束故事</li>";
        $('#operationSelect').empty()
        $('#operationSelect').append(operation);
    }
    function clickEffect(name, option) {
        $("#" + option).val(name)
        $('#statusSelect').empty();
        $('#characterSelect').empty();
        $('#itemSelect').empty();
        $('#EffectSelectModel').modal('hide')
        $('#EffectModel').modal('show')
    }

    //点击操作效果后
    function clickOperation(name, option, type) {
        clickEffect(name, option);
        let selector = $("#" + option).next(); //操作类型
        let value = $("#" + option).next().next().hide();
        selector.val(type);
        selector.hide();
    }

    function EmptyEffect() {
        $('#Effect').empty();
        $('#Effectoperation').empty();
    }

    //取消条件
    function EffectCancel(conditionID) {
        $("#effectid" + conditionID).remove();
    }

    function SaveEffect(storyoption) {

        let effect = [];
        $(".effectname").each(function () {
            let c = {
                Name: $(this).val(),
                Type: "",
                Value: ""
            }
            effect.push(c);

        })
        $(".effectvalue").each(function (i) {
            effect[i].Value = $(this).val();
        })
        $(".effectidselect").each(function (i) {
            effect[i].Type = $(this).val();
        })
        CardObj.storyOptions[storyoption].effect = effect;

        $('#EffectModel').modal('hide');
    }
        //////////////////////////////end
</script>

